
/* 简单写法 */
/* *, ::before, ::after{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
} */

/* ------公共基础样式------ */
/* 规范写法 */
body,header,footer,section,div,span,p,img,a,ul,li,ol,dl,dt,dd,h1,h2,h3,h4,h5,h6,em,i,b,u,menu,nav,
fieldset,legend,article,aside,details,figcaption,figure,hgroup,pre,form,blockquote,th,
th,td,tr,table,textarea{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;  /* 取消高亮显示 */
	-webkit-user-select: none; /* 禁止用户选中 */
	-webkit-text-size-adjust: none; /* 禁止自动调整字体大小 */
}

h1,h2,h3,h4,h5,h6,em,i,b,u{ /* 重置 常见标签的 默认样式 */
	font-size: 100%; 
	font-style: normal; 
	font-weight: normal;
}

ul,li,ol{ 
	list-style: none;
}

img,fieldset{
	display: block;
	border: 0 none; 
	vertical-align:middle;
}

input, textarea{
	resize: none; /*不允许调整尺寸*/
}

:focus{ 
	outline: none; 
}

input[type="submit"],input[type="reset"],
input[type="button"],input[type="password"],
input[type="search"],button{
	-webkit-appearance:none;  /*清除表单中对象的外观样式*/
}
.clearfix:after{  /*清除浮动*/
	display: block;
	width: 0;
	height: 0;
	line-height: 0px;
	visibility: hidden;
	content: '';
	clear: both;
}

/*超链接*/
a,a:link,a:visited{ 
	text-decoration: none; 
	color: #333;
}
a:hover{ 
	color: #666; 
	text-decoration: none;
}

body{
	font-family: "Microsoft YaHei","\u534E\u6587\u7EC6\u9ED1",Verdana,Arial,Helvetica,sans-serif; 
	font-size: 28px;
}

html{
	font-size: 100px; /* 1rem = 100px */
}

/* 方法一：媒体查询 */
@media screen and (min-width: 320px) {  /* 320px =< 屏幕宽度 < 360px*/
	html {
		font-size: 42.66px; 
	}
	body{
		font-size: 12px;
	}
}
@media screen and (min-width: 360px) {  /* 360px =< 屏幕宽度 < 375px*/
	html {
		font-size: 48px; 
	}
	body{
		font-size: 12px;
	}
}
@media screen and (min-width: 375px) {  /* 375px =< 屏幕宽度 < 384px*/
	html {
		font-size: 50px; 
	}
	body{
		font-size: 14px;
	}
}
@media screen and (min-width: 384px) {  /* 384px =< 屏幕宽度 < 400px*/
	html {
		font-size: 51.2px; 
	}
	body{
		font-size: 14px;
	}
}
@media screen and (min-width: 400px) {  /* 400px =< 屏幕宽度 < 414px*/
	html {
		font-size: 53.34px; 
	}
	body{
		font-size: 14px;
	}
}
@media screen and (min-width: 414px) {  /* 414px =< 屏幕宽度 < 424px*/
	html {
		font-size: 55.2px; 
	}
	body{
		font-size: 14px;
	}
}
@media screen and (min-width: 424px) {  /* 424px =< 屏幕宽度 < 480px*/
	html {
		font-size: 56.53px; 
	}
	body{
		font-size: 14px;
	}
}
@media screen and (min-width: 480px) {  /* 480px =< 屏幕宽度 < 540px*/
	html {
		font-size: 64px; 
	}
	body{
		font-size: 17.92px;
	}
}
@media screen and (min-width: 540px) {  /* 540px =< 屏幕宽度 < 720px*/
	html {
		font-size: 72px; 
	}
	body{
		font-size: 20.16px;
	}
}
@media screen and (min-width: 720px) {  /* 720px =< 屏幕宽度 < 750px*/
	html {
		font-size: 96px; 
	}
	body{
		font-size: 26.88px;
	}
}
@media screen and (min-width: 750px) {  /*  屏幕宽度 > 750px*/
	html {
		font-size: 100px; 
	}
	body{
		font-size: 28px;
	}
}


